<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/31
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"  %>
<html>
<head>
    <title>餐馆页</title>
    <link rel="stylesheet" href="css/zybootstrap.css">
    <link rel="stylesheet" href="css/zyhome.css">
</head>
<script charset="UTF-8" src="js/jquery-3.3.1.js"></script>
<script charset="UTF-8"  src="js/bootstrap.js"></script>
<body>
<div>
    <table class="table table-hover  table-striped table-bordered" >
        <thead>
        <tr>
            <th>店铺名</th>
            <th>店铺地址</th>
            <th></th>
        </tr>
        </thead>
        <tbody id="display">

        </tbody>
    </table>


    <div class="row">
        <div id="pageList" class="col-12 col-md-8"></div>
        <div id="pageTips" class="col-12 col-md-4"></div>
    </div>
</div>
<script>
    $(document).ready(function (){
        gotoPage(1,5);

        //
        //    $.ajax({
        //      url:"restaurant/getall",
        //        dataType:"json",
        //         success:function (ret) {
        //             $("#display").empty();
        //             let reslist=ret.dataZone.reslist;
        //
        //             $.each(reslist,function (index,item) {
        //                 var rid=item.rid;
        //
        //                 var Tr = $('<tr class="alert-success" ></tr>');
        //                 var resnameTd = $('<td></td>').text(item.rname);
        //                 var resaddressTd = $('<td></td>').text(item.raddress);
        //                 var button=$('<td></td>').html('<a  href="index.html?rid='+rid+'"  ><button type="button" class="btn-blue">进入商家</button></a>')
        //                 Tr.append(resnameTd).append(resaddressTd).append(button);
        //
        //
        //                 $("#display").append(Tr);
        //             });
        //             },
        //         error:function (eno){
        //          console.log(eno);
        //         }
        //         })


    })




    function gotoPage(page=1, pageSize=5) {
        // var page = page == null ? 1 : page;
        // var pageSize = pageSize == null ? 3 : pageSize;
        $.ajax({
            type: "GET",
            url: "restaurant/list",
            dataType: "json",
            data: "page=" + page + "&pageSize=" + pageSize,
            success: function (result) {
                // 解析返回的json数据并显示到界面中,封装为函数吧,太多东西了
                parseDataAndShow(result);
                //解析渲染分页条
                parsePageAndShow(result);
            },
            error: function () {
                alert("数据出错,请调试程序");
            }
        });
    }

    function parseDataAndShow(result) {
        // $('#display thead').empty();//清空表头
        $('#display').empty();//清空数据
        // 获取数据集合
        let reslist= result.dataZone.pageInfo.list;
        //渲染表头以及数据
        //渲染表头

        $.each(reslist,function (index,item) {
            var rid=item.rid;

            var Tr = $('<tr class="alert-success" ></tr>');
            var resnameTd = $('<td></td>').text(item.rname);
            var resaddressTd = $('<td></td>').text(item.raddress);
            var button=$('<td></td>').html('<a  href="buy.jsp?rid='+rid+'"  ><button type="button" class="btn-blue">进入商家</button></a>')
            Tr.append(resnameTd).append(resaddressTd).append(button);


            $("#display").append(Tr);
        });
    }



    function parsePageAndShow(result) {
        //因为是不跨页面的刷新操作,所以操作前先清空当前节点内容
        $("#pageTips").empty();
        $("#pageList").empty();

        var pageInfo = result.dataZone.pageInfo;
        //构建分页信息
        $("#pageTips").html("共" + pageInfo.total + "条记录," + pageInfo.pages + "页,每页" + pageInfo.pageSize + "条");
        //构建分页列表
        var oUl = $("<ul></ul>").addClass("pagination");
        var firstLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("首页").addClass("page-link").attr("href", "#"));
        var preLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("上一页").addClass("page-link").attr("href", "#"));
        if (pageInfo.isFirstPage) {
            firstLi.addClass("disabled");
            preLi.addClass("disabled");
        }
        oUl.append(firstLi).append(preLi);

        $.each(pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").addClass("page-item").append($("<a></a>").text(item).addClass("page-link").attr("href", "#"));
            if (pageInfo.pageNum == item)
                numLi.addClass("active");
            //给页码绑定点击事件,能够跳转页面
            numLi.click(function () {
                console.log(item);
                gotoPage(item);//跳转到指定页面
            });

            numLi.appendTo(oUl);
        });

        var lastLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("尾页").addClass("page-link").attr("href", "#"));
        var nextLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("下一页").addClass("page-link").attr("href", "#"));
        if (pageInfo.isLastPage) {
            nextLi.addClass("disabled");
            lastLi.addClass("disabled");
        }
        //给其他页码标签绑定事件
        firstLi.click(function () {
            gotoPage(1);
        });
        preLi.click(function () {
            gotoPage(pageInfo.pageNum - 1);
        });
        nextLi.click(function () {
            gotoPage(pageInfo.pageNum + 1);
        });
        lastLi.click(function () {
            gotoPage(pageInfo.pages + 1);
        });//因为设置了分页插件的合理化配置,所以给一个很大的值就会到最后一页
        oUl.append(nextLi).append(lastLi);

        $("#pageList").append(oUl);

        //解除不能点击按钮的事件
        //分页代码中的部分属性点击失去链接属性,因为这是dom刷新后添加的事件,所以取消默认行为已经不好用了，需要使用off函数进行解绑定
        $(".pagination .disabled,.pagination .active").off("click");

    }

</script>






</body>
</html>
